<template>
  <div class="content-wrap">
    <div class="svgs-wrap">
      <div
        v-for="item in svgList"
        :key="item"
        class="svg-item"
        v-copy='{ content: `<adv-icon :icon="${item}"></adv-icon>` }'
      >
        <adv-icon :icon="item"></adv-icon>
        <div class="svg-name">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { svgs } from "leisure-lib";
import { computed, onMounted, ref } from "vue";

const svgList = ref([]);
onMounted(() => {
  svgList.value = Object.entries(svgs).reduce((prev, [path]) => {
    prev.push(path.slice(path.lastIndexOf("/") + 1, path.lastIndexOf(".")));
    return prev;
  }, []);
  console.log("🚀 ~ svgList:", svgList);
});
</script>

<style lang="less" scoped>
.svgs-wrap {
  display: flex;
  flex-wrap: wrap;
  .svg-item {
    border: 1px solid var(--color-border);
    cursor: pointer;
    text-align: center;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    will-change: all;
    &:hover {
      .icon {
        scale: 1.8;
        transition: 0.5s;
      }
    }
    .svg-name {
      text-align: center;
      margin-top: calc(var(--padding-base) * 4);
    }
  }
}
</style>
